<template>
  <div class="container">
    <el-button type="primary" size="small" @click="addCourse()" style="width:'100%'">添加</el-button>
    <el-table :data="customerList" class="table" border :key="customerList.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">

      <el-table-column label="科目名称" align="center" v-if="customerList!=''">
        <template slot-scope="{row}">
          <span>{{row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="danger" size="mini" @click="deleteabc(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import store from '@/store'
  import request from '@/utils/request'

  import {add,dele,gettp} from '@/api/thk/coursemanagement'

  export default {
    name: 'Customer',
    components:{add,dele,gettp},
    data() {
      return {
        customerList: [],

        total: undefined,

        loading:true

      }
      
    },
    created() {
      gettp().then(res=>{
        this.customerList=res.data.data
        this.loading=false
      })
    },
    methods:{
        //删除科目点击方法
        deleteabc(id){
            let num=0;
            this.$confirm('此操作将会删除机构, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const token=store.getters.token
              dele(id).then(res=>{
                console.log(res)
                this.$message({
                  type:'success',
                  message: '成功删除'
                });
              })
              this.customerList.forEach(function(item,index){
                if(item.id==id){
                  num=index
                }
              })
              this.customerList.splice(num,1)
              console.log("13")
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
            console.log(this.customerList)
        },
        //添加科目点击方法
        addCourse(){
          this.$prompt('科目名称', '添加', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            add(value).then(res=>{
              if(res.data.status){
                this.$message({
                  type:'success',
                  message: res.data.msg
                });
                gettp().then(res=>{
                  this.customerList.push(res.data.data[res.data.data.length-1])
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
          });
        },
    }
  }
</script>

<style scoped>
  
</style>
